
<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="bootstrap material admin template">
    <meta name="author" content="">

    <title>Panel Structure | Remark Material Admin Template</title>

    <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
    <link rel="shortcut icon" href="../assets/images/favicon.ico">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.2.0">
    <link rel="stylesheet" href="../assets/css/site.min.css?v2.2.0">

    <!-- Skin tools (demo site only) -->
    <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.2.0">
    <script src="../assets/js/sections/skintools.min.js"></script>

    <!-- Plugins -->
    <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/waves/waves.min.css?v2.2.0">

    <!-- Plugins For This Page -->
    <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">

    <!-- Fonts -->
    <link rel="stylesheet" href="../../global/fonts/material-design/material-design.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.2.0">

    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700'>


    <!--[if lt IE 9]>
    <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

    <!--[if lt IE 10]>
    <script src="../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

    <!-- Scripts -->
    <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
    <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
    <script>
        Breakpoints();
    </script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<nav class="site-navbar navbar navbar-inverse navbar-fixed-top navbar-mega" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
                data-toggle="menubar">
            <span class="sr-only">Toggle navigation</span>
            <span class="hamburger-bar"></span>
        </button>
        <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
                data-toggle="collapse">
            <i class="icon md-more" aria-hidden="true"></i>
        </button>
        <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
            <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
            <span class="navbar-brand-text hidden-xs"> Remark</span>
        </div>
        <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
                data-toggle="collapse">
            <span class="sr-only">Toggle Search</span>
            <i class="icon md-search" aria-hidden="true"></i>
        </button>
    </div>

    <div class="navbar-container container-fluid">
        <!-- Navbar Collapse -->
        <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
            <!-- Navbar Toolbar -->
            <ul class="nav navbar-toolbar">
                <li class="hidden-float" id="toggleMenubar">
                    <a data-toggle="menubar" href="#" role="button">
                        <i class="icon hamburger hamburger-arrow-left">
                            <span class="sr-only">Toggle menubar</span>
                            <span class="hamburger-bar"></span>
                        </i>
                    </a>
                </li>
                <li class="hidden-xs" id="toggleFullscreen">
                    <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
                        <span class="sr-only">Toggle fullscreen</span>
                    </a>
                </li>
                <li class="hidden-float">
                    <a class="icon md-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
                       role="button">
                        <span class="sr-only">Toggle Search</span>
                    </a>
                </li>
                <li class="dropdown dropdown-fw dropdown-mega">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                       data-animation="fade" role="button">Mega <i class="icon md-chevron-down" aria-hidden="true"></i></a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <div class="mega-content">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <h5>UI Kit</h5>
                                        <ul class="blocks-2">
                                            <li class="mega-menu margin-0">
                                                <ul class="list-icons">
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/animation.html">Animation</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="buttons.html">Buttons</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="colors.html">Colors</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="dropdowns.html">Dropdowns</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="icons.html">Icons</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/lightbox.html">Lightbox</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="mega-menu margin-0">
                                                <ul class="list-icons">
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="modals.html">Modals</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="panel-structure.html">Panels</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../structure/overlay.html">Overlay</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="tooltip-popover.html ">Tooltips</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/scrollable.html">Scrollable</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="typography.html">Typography</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5>Media
                                            <span class="badge badge-success">4</span>
                                        </h5>
                                        <ul class="blocks-3">
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-1-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-2-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-3-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-4-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-5-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-6-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5 class="margin-bottom-0">Accordion</h5>
                                        <!-- Accordion -->
                                        <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                                             role="tablist">
                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                                                    <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                                                       aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                                        Collapsible Group Item #1
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                                                        congressus ostendit alienae, voluptati ornateque
                                                        accusamus clamat reperietur convicia albucius.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                                                    <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                                                       data-parent="#siteMegaAccordion" aria-expanded="false"
                                                       aria-controls="siteMegaCollapseTwo">
                                                        Collapsible Group Item #2
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                                                        loco ignavi, credo videretur multoque choro fatemur
                                                        mortis animus adoptionem, bello statuat expediunt
                                                        naturales.
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                                                    <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                                                       data-parent="#siteMegaAccordion" aria-expanded="false"
                                                       aria-controls="siteMegaCollapseThree">
                                                        Collapsible Group Item #3
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                                                        suscipere. Desiderat magnum, contenta poena desiderant
                                                        concederetur menandri damna disputandum corporum.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Accordion -->
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- End Navbar Toolbar -->

            <!-- Navbar Toolbar Right -->
            <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
                       aria-expanded="false" role="button">
                        <span class="flag-icon flag-icon-us"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-gb"></span> English</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-fr"></span> French</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-cn"></span> Chinese</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-de"></span> German</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-nl"></span> Dutch</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                       data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-account" aria-hidden="true"></i> Profile</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-card" aria-hidden="true"></i> Billing</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-settings" aria-hidden="true"></i> Settings</a>
                        </li>
                        <li class="divider" role="presentation"></li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-power" aria-hidden="true"></i> Logout</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
                       data-animation="scale-up" role="button">
                        <i class="icon md-notifications" aria-hidden="true"></i>
                        <span class="badge badge-danger up">5</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>NOTIFICATIONS</h5>
                            <span class="label label-round label-danger">New 5</span>
                        </li>

                        <li class="list-group" role="presentation">
                            <div data-role="container">
                                <div data-role="content">
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-receipt bg-red-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">A new order has been placed</h6>
                                                <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">5 hours ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-account bg-green-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Completed the task</h6>
                                                <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">2 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Settings updated</h6>
                                                <time class="media-meta" datetime="2015-06-11T14:05:00+08:00">2 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Event started</h6>
                                                <time class="media-meta" datetime="2015-06-10T13:50:18+08:00">3 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-comment bg-orange-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Message received</h6>
                                                <time class="media-meta" datetime="2015-06-10T12:34:48+08:00">3 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                                <i class="icon md-settings" aria-hidden="true"></i>
                            </a>
                            <a href="javascript:void(0)" role="menuitem">
                                All notifications
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
                       data-animation="scale-up" role="button">
                        <i class="icon md-email" aria-hidden="true"></i>
                        <span class="badge badge-info up">3</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>MESSAGES</h5>
                            <span class="label label-round label-info">New 3</span>
                        </li>

                        <li class="list-group" role="presentation">
                            <div data-role="container">
                                <div data-role="content">
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Mary Adams</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-17T20:22:05+08:00">30 minutes ago</time>
                                                </div>
                                                <div class="media-detail">Anyways, i would like just do it</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Caleb Richards</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-17T12:30:30+08:00">12 hours ago</time>
                                                </div>
                                                <div class="media-detail">I checheck the document. But there seems</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">June Lane</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-16T18:38:40+08:00">2 days ago</time>
                                                </div>
                                                <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Edward Fletcher</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-15T20:34:48+08:00">3 days ago</time>
                                                </div>
                                                <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                                <i class="icon md-settings" aria-hidden="true"></i>
                            </a>
                            <a href="javascript:void(0)" role="menuitem">
                                See all messages
                            </a>
                        </li>
                    </ul>
                </li>
                <li id="toggleChat">
                    <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
                        <i class="icon md-comment" aria-hidden="true"></i>
                    </a>
                </li>
            </ul>
            <!-- End Navbar Toolbar Right -->
        </div>
        <!-- End Navbar Collapse -->

        <!-- Site Navbar Seach -->
        <div class="collapse navbar-search-overlap" id="site-navbar-search">
            <form role="search">
                <div class="form-group">
                    <div class="input-search">
                        <i class="input-search-icon md-search" aria-hidden="true"></i>
                        <input type="text" class="form-control" name="site-search" placeholder="Search...">
                        <button type="button" class="input-search-close icon md-close" data-target="#site-navbar-search"
                                data-toggle="collapse" aria-label="Close"></button>
                    </div>
                </div>
            </form>
        </div>
        <!-- End Site Navbar Seach -->
    </div>
</nav>
<div class="site-menubar">
    <div class="site-menubar-body">
        <div>
            <div>
                <ul class="site-menu">
                    <li class="site-menu-category">General</li>
                    <li class="site-menu-item">
                        <a class="animsition-link" href="../index.html">
                            <i class="site-menu-icon md-view-dashboard" aria-hidden="true"></i>
                            <span class="site-menu-title">Dashboard</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-view-compact" aria-hidden="true"></i>
                            <span class="site-menu-title">Layouts</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menu-collapsed.html">
                                    <span class="site-menu-title">Menu Collapsed</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menu-expended.html">
                                    <span class="site-menu-title">Menu Expended</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/grids.html">
                                    <span class="site-menu-title">Grid Scaffolding</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/layout-grid.html">
                                    <span class="site-menu-title">Layout Grid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/headers.html">
                                    <span class="site-menu-title">Different Headers</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/panel-transition.html">
                                    <span class="site-menu-title">Panel Transition</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/boxed.html">
                                    <span class="site-menu-title">Boxed Layout</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/two-columns.html">
                                    <span class="site-menu-title">Two Columns</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/bordered-header.html">
                                    <span class="site-menu-title">Bordered Header</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menubar-flipped.html">
                                    <span class="site-menu-title">Menubar Flipped</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menubar-native-scrolling.html">
                                    <span class="site-menu-title">Menubar Native Scrolling</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/page-aside-fixed.html">
                                    <span class="site-menu-title">Page Aside Fixed</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-google-pages" aria-hidden="true"></i>
                            <span class="site-menu-title">Pages</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Errors</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-400.html">
                                            <span class="site-menu-title">400</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-403.html">
                                            <span class="site-menu-title">403</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-404.html">
                                            <span class="site-menu-title">404</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-500.html">
                                            <span class="site-menu-title">500</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-503.html">
                                            <span class="site-menu-title">503</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/faq.html">
                                    <span class="site-menu-title">FAQ</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/gallery.html">
                                    <span class="site-menu-title">Gallery</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/gallery-grid.html">
                                    <span class="site-menu-title">Gallery Grid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/search-result.html">
                                    <span class="site-menu-title">Search Result</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Maps</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/map-google.html">
                                            <span class="site-menu-title">Google Maps</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/map-vector.html">
                                            <span class="site-menu-title">Vector Maps</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/maintenance.html">
                                    <span class="site-menu-title">Maintenance</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/forgot-password.html">
                                    <span class="site-menu-title">Forgot Password</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/lockscreen.html">
                                    <span class="site-menu-title">Lockscreen</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login.html">
                                    <span class="site-menu-title">Login</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register.html">
                                    <span class="site-menu-title">Register</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login-v2.html">
                                    <span class="site-menu-title">Login V2</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register-v2.html">
                                    <span class="site-menu-title">Register V2</span>
                                    <div class="site-menu-label">
                                        <span class="label label-info label-round">new</span>
                                    </div>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login-v3.html">
                                    <span class="site-menu-title">Login V3</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register-v3.html">
                                    <span class="site-menu-title">Register V3</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/user.html">
                                    <span class="site-menu-title">User List</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/invoice.html">
                                    <span class="site-menu-title">Invoice</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/blank.html">
                                    <span class="site-menu-title">Blank Page</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/email.html">
                                    <span class="site-menu-title">Email</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/code-editor.html">
                                    <span class="site-menu-title">Code Editor</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/profile.html">
                                    <span class="site-menu-title">Profile</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/site-map.html">
                                    <span class="site-menu-title">Sitemap</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Elements</li>
                    <li class="site-menu-item has-sub active open">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-palette" aria-hidden="true"></i>
                            <span class="site-menu-title">Basic UI</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub active open">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Panel</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item active">
                                        <a class="animsition-link" href="panel-structure.html">
                                            <span class="site-menu-title">Panel Structure</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-actions.html">
                                            <span class="site-menu-title">Panel Actions</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-portlets.html">
                                            <span class="site-menu-title">Panel Portlets</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="buttons.html">
                                    <span class="site-menu-title">Buttons</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="dropdowns.html">
                                    <span class="site-menu-title">Dropdowns</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="icons.html">
                                    <span class="site-menu-title">Icons</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="list.html">
                                    <span class="site-menu-title">List</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="tooltip-popover.html">
                                    <span class="site-menu-title">Tooltip &amp; Popover</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="modals.html">
                                    <span class="site-menu-title">Modals</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="tabs-accordions.html">
                                    <span class="site-menu-title">Tabs &amp; Accordions</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="images.html">
                                    <span class="site-menu-title">Images</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="badges-labels.html">
                                    <span class="site-menu-title">Badges &amp; Labels</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="progress-bars.html">
                                    <span class="site-menu-title">Progress Bars</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="carousel.html">
                                    <span class="site-menu-title">Carousel</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="typography.html">
                                    <span class="site-menu-title">Typography</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="colors.html">
                                    <span class="site-menu-title">Colors</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="utilities.html">
                                    <span class="site-menu-title">Utilties</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-format-color-fill" aria-hidden="true"></i>
                            <span class="site-menu-title">Advanced UI</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item hidden-xs site-tour-trigger">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Tour</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/animation.html">
                                    <span class="site-menu-title">Animation</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/highlight.html">
                                    <span class="site-menu-title">Highlight</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/lightbox.html">
                                    <span class="site-menu-title">Lightbox</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/scrollable.html">
                                    <span class="site-menu-title">Scrollable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/rating.html">
                                    <span class="site-menu-title">Rating</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/context-menu.html">
                                    <span class="site-menu-title">Context Menu</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/alertify.html">
                                    <span class="site-menu-title">Alertify</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/masonry.html">
                                    <span class="site-menu-title">Masonry</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/treeview.html">
                                    <span class="site-menu-title">Treeview</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/toastr.html">
                                    <span class="site-menu-title">Toastr</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/maps-vector.html">
                                    <span class="site-menu-title">Vector Maps</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/maps-google.html">
                                    <span class="site-menu-title">Google Maps</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/sortable-nestable.html">
                                    <span class="site-menu-title">Sortable &amp; Nestable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                                    <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-puzzle-piece" aria-hidden="true"></i>
                            <span class="site-menu-title">Structure</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/alerts.html">
                                    <span class="site-menu-title">Alerts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/ribbon.html">
                                    <span class="site-menu-title">Ribbon</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/pricing-tables.html">
                                    <span class="site-menu-title">Pricing Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/overlay.html">
                                    <span class="site-menu-title">Overlay</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/cover.html">
                                    <span class="site-menu-title">Cover</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/timeline-simple.html">
                                    <span class="site-menu-title">Simple Timeline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/timeline.html">
                                    <span class="site-menu-title">Timeline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/step.html">
                                    <span class="site-menu-title">Step</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/comments.html">
                                    <span class="site-menu-title">Comments</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/media.html">
                                    <span class="site-menu-title">Media</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/chat.html">
                                    <span class="site-menu-title">Chat</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/testimonials.html">
                                    <span class="site-menu-title">Testimonials</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/nav.html">
                                    <span class="site-menu-title">Nav</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/navbars.html">
                                    <span class="site-menu-title">Navbars</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/blockquotes.html">
                                    <span class="site-menu-title">Blockquotes</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/pagination.html">
                                    <span class="site-menu-title">Pagination</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/breadcrumbs.html">
                                    <span class="site-menu-title">Breadcrumbs</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-widgets" aria-hidden="true"></i>
                            <span class="site-menu-title">Widgets</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/statistics.html">
                                    <span class="site-menu-title">Statistics Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/data.html">
                                    <span class="site-menu-title">Data Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/blog.html">
                                    <span class="site-menu-title">Blog Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/chart.html">
                                    <span class="site-menu-title">Chart Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/social.html">
                                    <span class="site-menu-title">Social Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/weather.html">
                                    <span class="site-menu-title">Weather Widgets</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-comment-alt-text" aria-hidden="true"></i>
                            <span class="site-menu-title">Forms</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/general.html">
                                    <span class="site-menu-title">General Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/material.html">
                                    <span class="site-menu-title">Material Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/advanced.html">
                                    <span class="site-menu-title">Advanced Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/layouts.html">
                                    <span class="site-menu-title">Form Layouts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/wizard.html">
                                    <span class="site-menu-title">Form Wizard</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/validation.html">
                                    <span class="site-menu-title">Form Validation</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/masks.html">
                                    <span class="site-menu-title">Form Masks</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/editable.html">
                                    <span class="site-menu-title">Form Editable</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Editors</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-summernote.html">
                                            <span class="site-menu-title">Summernote</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-markdown.html">
                                            <span class="site-menu-title">Markdown</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-ace.html">
                                            <span class="site-menu-title">Ace Editor</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/image-cropping.html">
                                    <span class="site-menu-title">Image Cropping</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/file-uploads.html">
                                    <span class="site-menu-title">File Uploads</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-border-all" aria-hidden="true"></i>
                            <span class="site-menu-title">Tables</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/basic.html">
                                    <span class="site-menu-title">Basic Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/bootstrap.html">
                                    <span class="site-menu-title">Bootstrap Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/floatthead.html">
                                    <span class="site-menu-title">floatThead</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/responsive.html">
                                    <span class="site-menu-title">Responsive Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/editable.html">
                                    <span class="site-menu-title">Editable Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/jsgrid.html">
                                    <span class="site-menu-title">jsGrid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/footable.html">
                                    <span class="site-menu-title">FooTable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/datatable.html">
                                    <span class="site-menu-title">DataTables</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-chart" aria-hidden="true"></i>
                            <span class="site-menu-title">Chart</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/chartjs.html">
                                    <span class="site-menu-title">Chart.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/gauges.html">
                                    <span class="site-menu-title">Gauges</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/flot.html">
                                    <span class="site-menu-title">Flot</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/peity.html">
                                    <span class="site-menu-title">Peity</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/sparkline.html">
                                    <span class="site-menu-title">Sparkline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/morris.html">
                                    <span class="site-menu-title">Morris</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/chartist.html">
                                    <span class="site-menu-title">Chartist.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/rickshaw.html">
                                    <span class="site-menu-title">Rickshaw</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/pie-progress.html">
                                    <span class="site-menu-title">Pie Progress</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/c3.html">
                                    <span class="site-menu-title">C3</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Apps</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-apps" aria-hidden="true"></i>
                            <span class="site-menu-title">Apps</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/contacts/contacts.html">
                                    <span class="site-menu-title">Contacts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/calendar/calendar.html">
                                    <span class="site-menu-title">Calendar</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/notebook/notebook.html">
                                    <span class="site-menu-title">Notebook</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                                    <span class="site-menu-title">Taskboard</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Documents</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/articles.html">
                                            <span class="site-menu-title">Articles</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/categories.html">
                                            <span class="site-menu-title">Categories</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/article.html">
                                            <span class="site-menu-title">Article</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/forum/forum.html">
                                    <span class="site-menu-title">Forum</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/message/message.html">
                                    <span class="site-menu-title">Message</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/projects/projects.html">
                                    <span class="site-menu-title">Projects</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                                    <span class="site-menu-title">Mailbox</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/media/overview.html">
                                    <span class="site-menu-title">Media</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/work/work.html">
                                    <span class="site-menu-title">Work</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/location/location.html">
                                    <span class="site-menu-title">Location</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Angular UI</li>
                    <li class="site-menu-item">
                        <a class="animsition-link" href="../angular/index.html">
                            <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                            <span class="site-menu-title">Angular UI</span>
                            <div class="site-menu-label">
                                <span class="label label-danger label-round">new</span>
                            </div>
                        </a>
                    </li>
                </ul>

                <div class="site-menubar-section">
                    <h5>
                        Milestone
                        <span class="pull-right">30%</span>
                    </h5>
                    <div class="progress progress-xs">
                        <div class="progress-bar active" style="width: 30%;" role="progressbar"></div>
                    </div>
                    <h5>
                        Release
                        <span class="pull-right">60%</span>
                    </h5>
                    <div class="progress progress-xs">
                        <div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="site-menubar-footer">
        <a href="javascript: void(0);" class="fold-show" data-placement="top" data-toggle="tooltip"
           data-original-title="Settings">
            <span class="icon md-settings" aria-hidden="true"></span>
        </a>
        <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Lock">
            <span class="icon md-eye-off" aria-hidden="true"></span>
        </a>
        <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Logout">
            <span class="icon md-power" aria-hidden="true"></span>
        </a>
    </div>
</div>
<div class="site-gridmenu">
    <div>
        <div>
            <ul>
                <li>
                    <a href="../apps/mailbox/mailbox.html">
                        <i class="icon md-email"></i>
                        <span>Mailbox</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/calendar/calendar.html">
                        <i class="icon md-calendar"></i>
                        <span>Calendar</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/contacts/contacts.html">
                        <i class="icon md-account"></i>
                        <span>Contacts</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/media/overview.html">
                        <i class="icon md-videocam"></i>
                        <span>Media</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/documents/categories.html">
                        <i class="icon md-receipt"></i>
                        <span>Documents</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/projects/projects.html">
                        <i class="icon md-image"></i>
                        <span>Project</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/forum/forum.html">
                        <i class="icon md-comments"></i>
                        <span>Forum</span>
                    </a>
                </li>
                <li>
                    <a href="../index.html">
                        <i class="icon md-view-dashboard"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>


<!-- Page -->
<div class="page animsition">
    <div class="page-header">
        <ol class="breadcrumb">
            <li><a href="../index.html">Home</a></li>
            <li class="active">Basic UI</li>
        </ol>
        <h1 class="page-title">Panel Structure</h1>
        <div class="page-header-actions">
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Edit">
                <i class="icon md-edit" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Refresh">
                <i class="icon md-refresh-alt" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Setting">
                <i class="icon md-settings" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <!-- Page Content -->
    <div class="page-content container-fluid">
        <div class="row">
            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel With Heading -->
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel Heading</h3>
                    </div>
                    <div class="panel-body">
                        <h4>Body Heading</h4>
                        <p>Easily add a heading container to your panel with <code>.panel-heading</code>.
                            You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code>                with a <code>.panel-title</code> class to add a pre-styled heading.</p>
                        <p>For proper link coloring, be sure to place links in headings within
                            <code>.panel-title</code>.</p>
                    </div>
                </div>
                <!-- End Example Panel With Heading -->
            </div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel With Footer -->
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <h4>Body Heading</h4>
                        <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note
                            that panel footers do not inherit colors and borders when using
                            contextual variations as they are not meant to be in the foreground.</p>
                    </div>
                    <div class="panel-footer">Panel Footer</div>
                </div>
                <!-- End Example Panel With Footer -->
            </div>

            <div class="clearfix visible-md-block visible-lg-block hidden-xlg"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel With All -->
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel Heading</h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit
                            tortor, dictum in gravida nec, aliquet non lorem. pellentesque.ipiscing
                            elit. Fusce velit tortor.</P>
                    </div>
                    <div class="panel-footer">Panel Footer</div>
                </div>
                <!-- End Example Panel With All -->
            </div>

            <div class="clearfix visible-xlg-block"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Heading With Desc -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Heading With Desc
                            <small>Panel Description Here..</small>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit
                            tortor, dictum in gravida nec, aliquet non lorem. pellentesque.ipiscing
                            elit. Fusce velit tortor.</P>
                    </div>
                </div>
                <!-- End Example Heading With Desc -->
            </div>

            <div class="clearfix visible-md-block visible-lg-block hidden-xlg"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Heading With Desc Bottom -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Heading With Desc Bottom
                            <span class="panel-desc">Panel Description Here..</span>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit
                            tortor, dictum in gravida nec, aliquet non lorem. pellentesque.ipiscing
                            elit.</p>
                    </div>
                </div>
                <!-- End Example Heading With Desc Bottom -->
            </div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Heading With Label -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Heading With Label
                            <span class="label label-primary">New</span>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit
                            tortor, dictum in gravida nec, aliquet non lorem. pellentesque.ipiscing
                            elit. Fusce velit tortor.</p>
                    </div>
                </div>
                <!-- End Example Heading With Label -->
            </div>

            <div class="clearfix"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Heading Icon -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="icon md-case" aria-hidden="true"></i>Heading Icon</h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum Deserunt et dolore tempor do ullamco velit magna elit
                            reprehenderit laboris laborum reprehenderit do voluptate officia
                            eiusmod elit irure reprehenderit Duis ea mollit eiusmod consectetur
                            qui enim dolor enim ex qui aute culpa sit.</p>
                    </div>
                </div>
                <!-- End Example Heading Icon -->
            </div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Heading With Links -->
                <div class="panel">
                    <div class="panel-heading">
                        <ul class="panel-actions">
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                        </ul>
                        <h3 class="panel-title">Heading With Links</h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum Magna qui labore amet qui id consequat adipisicing irure
                            consectetur qui minim eu nulla deserunt aliquip et sed anim proident
                            culpa ad aliquip consequat minim reprehenderit proident cupidatat
                            velit in eiusmod laborum aliqua in.</p>
                    </div>
                </div>
                <!-- End Example Heading With Links -->
            </div>

            <div class="clearfix visible-md-block visible-lg-block hidden-xlg"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Heading With Dropdown -->
                <div class="panel">
                    <div class="panel-heading">
                        <div class="panel-actions">
                            <div class="dropdown">
                                <a class="dropdown-toggle" id="examplePanelDropdown" data-toggle="dropdown" href="#"
                                   aria-expanded="false" role="button">Dropdown <span class="caret"></span></a>
                                <ul class="dropdown-menu bullet dropdown-menu-right" aria-labelledby="examplePanelDropdown"
                                    role="menu">
                                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon md-mail-reply" aria-hidden="true"></i> Reply</a></li>
                                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon md-share" aria-hidden="true"></i> Share</a></li>
                                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon md-delete" aria-hidden="true"></i> Delete</a></li>
                                    <li class="divider" role="presentation"></li>
                                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon md-settings" aria-hidden="true"></i> Settings</a></li>
                                </ul>
                            </div>
                        </div>
                        <h3 class="panel-title">Heading With Dropdown</h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim
                            sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute
                            cillum consequat enim Ut veniam labore dolor anim quis ullamco
                            in cupidatat dolore ut amet elit sint magna exercitation aliquip.</p>
                    </div>
                </div>
                <!-- End Example Heading With Dropdown -->
            </div>

            <div class="clearfix visible-xlg-block"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel Alert -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel With Alert</h3>
                    </div>
                    <div class="alert alert-danger alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                        Lorem ipsum dolor sit amet, <a class="alert-link" href="javascript:void(0)">consectetur adipisicing elit</a>.
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
                            nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
                            Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
                            Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris
                            massa.</p>
                    </div>
                </div>
                <!-- End Example Panel Alert -->
            </div>

            <div class="clearfix visible-md-block visible-lg-block hidden-xlg"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel Tables -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel With Tables</h3>
                    </div>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Larry</td>
                            <td>the Bird</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>Jason</td>
                            <td>Wu</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!-- End Example Panel Tables -->
            </div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel With List Group -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel With List Group</h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum Mollit et minim commodo est labore fugiat id Ut in ut
                            exercitation aute esse Ut do irure non dolore id anim dolore in
                            ad incididunt elit eiusmod sed dolor labore sunt est consectetur
                            sint ex Duis Ut officia pariatur.</p>
                    </div>
                    <ul class="list-group list-group-bordered">
                        <li class="list-group-item">Dapibus ac facilisis</li>
                        <li class="list-group-item">Morbi leo risus</li>
                    </ul>
                </div>
                <!-- End Example Panel With List Group -->
            </div>

            <div class="clearfix"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel With List Group Inner -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel With Inner List Group</h3>
                    </div>
                    <div class="panel-body">
                        <p>Some default panel content here. Nulla vitae elit libero, a pharetra
                            augue. Aenean lacinia bibendum nulla sed consectetur.</p>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <div class="media">
                                    <div class="media-left">
                                        <a class="avatar" href="javascript:void(0)">
                                            <img class="img-responsive" src="../../global/portraits/9.jpg"
                                                 alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">Willard Wood</h4>
                                        <div>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus.</div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="media">
                                    <div class="media-left">
                                        <a class="avatar" href="javascript:void(0)">
                                            <img class="img-responsive" src="../../global/portraits/10.jpg"
                                                 alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">Ronnie Ellis</h4>
                                        <div>Porta ac consectetur ac. Porta ac consectetur ac.</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End Example Panel List Group Inner -->
            </div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Tabs In The Panel -->
                <div class="panel nav-tabs-horizontal">
                    <div class="panel-heading">
                        <h3 class="panel-title">Tabs In The Panel</h3>
                    </div>
                    <ul class="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
                        <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTopHome" aria-controls="exampleTopHome"
                                                                  role="tab"><i class="icon md-home" aria-hidden="true"></i>Home</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTopComponents" aria-controls="exampleTopComponents"
                                                   role="tab"><i class="icon md-account" aria-hidden="true"></i>Components</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTopCss" aria-controls="exampleTopCss"
                                                   role="tab"><i class="icon md-label" aria-hidden="true"></i>CSS</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTopJavascript" aria-controls="exampleTopJavascript"
                                                   role="tab"><i class="icon md-cloud" aria-hidden="true"></i>JavaScript</a></li>
                        <li class="dropdown" role="presentation">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                                <span class="caret"></span>Dropdown </a>
                            <ul class="dropdown-menu" role="menu">
                                <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTopHome" aria-controls="exampleTopHome"
                                                                          role="tab"><i class="icon md-home" aria-hidden="true"></i>Home</a></li>
                                <li role="presentation"><a data-toggle="tab" href="#exampleTopComponents" aria-controls="exampleTopComponents"
                                                           role="tab"><i class="icon md-account" aria-hidden="true"></i>Components</a></li>
                                <li role="presentation"><a data-toggle="tab" href="#exampleTopCss" aria-controls="exampleTopCss"
                                                           role="tab"><i class="icon md-label" aria-hidden="true"></i>CSS</a></li>
                                <li role="presentation"><a data-toggle="tab" href="#exampleTopJavascript" aria-controls="exampleTopJavascript"
                                                           role="tab"><i class="icon md-cloud" aria-hidden="true"></i>JavaScript</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div class="panel-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="exampleTopHome" role="tabpanel">
                                Conturbamur senectutem saepti statua, putanda homini acuti dialectica levamur urbanitas
                                animadversionem mala se depulsa, magis nihilo efficeret tenetur
                                cives gloriae concursio defendit conscientiam nascuntur, refugiendi
                                defendit falsi platonem paranda metum iustioribus cognita robustus,
                                tuum omnia usque omnis temperantiam quaeri electram.
                            </div>
                            <div class="tab-pane" id="exampleTopComponents" role="tabpanel">
                                Protervi dissensio consuetudine equos publicam ingenia. Voluptatibus legendus initia
                                confirmare sententiam. Desistunt possint habeatur dediti dubio,
                                triarium is offendimur reprehenderit exercitus laudabilis motus
                                celeritas, utrum dissentio renovata, habet partus natus. Iustius
                                disserunt, quantum ennii admodum divinum mortem elaborare primum
                                autem.
                            </div>
                            <div class="tab-pane" id="exampleTopCss" role="tabpanel">
                                Incurrunt latinam, faciendi dedecora evertitur delicatissimi, afficit noctesque
                                detracta illustriora epicurum contenta rogatiuncula dolores perspecta
                                indocti, eveniunt confirmatur tractat consuevit durissimis iuvaret
                                coercendi familiarem. Dolere prima fortunae intellegamus vix
                                porro huic errorem molestum, graecos deinde effugiendorum aliter
                                appetendum afferrent eosdem.
                            </div>
                            <div class="tab-pane" id="exampleTopJavascript" role="tabpanel">
                                Dediti iniuste vitae dedecora victi, pueros vulgo adhibenda at gravis epicurus
                                alii facerem, aetatis. Rectas, splendide sensus ruinae dolendum
                                audire ipse, loca mollis manilium concordia depravate congressus
                                fruenda. Nocet magna tradere hunc grata gloriosis animus dum
                                consumere gravissimas. Erunt alii.
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Example Tabs In The Panel -->
            </div>

            <div class="clearfix visible-md-block visible-lg-block hidden-xlg"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Tabs In The Bottom -->
                <div class="panel nav-tabs-horizontal">
                    <div class="panel-heading">
                        <h3 class="panel-title">Tabs In The Panel</h3>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="exampleBottomHome" role="tabpanel">
                                Desideret pueros severitatem sed. Leniter a inveniri animal praeceptrice molestum
                                insatiabiles negant voluptaria, diligi meminerunt. Initia offendimur
                                confectum mundus fecerit legatis optari, domesticarum eadem mandamus
                                admodum nominant maiorum, putem, intellegitur magna recusandae.
                                Levius puerilis religionis elegantis facile praeclara que delectet.
                            </div>
                            <div class="tab-pane" id="exampleBottomComponents" role="tabpanel">
                                Nec urbane libidinum otiosum aspernatur solum, percurri placuit collaudata parentes
                                oportet delectu ad amicos, primis facultas theseo metus tutiorem
                                huc negat cupiditates. Intellegimus magis suo motu appetere brutus
                                atque loqueretur locus litteris, diogenem probabis moribus utinam
                                firmitatem dolendum expetenda late.
                            </div>
                            <div class="tab-pane" id="exampleBottomCss" role="tabpanel">
                                Adversarium claris erunt utramque temperantia soleat, impetum cives aut, appellant
                                sanos tradit, naturam, sophocles, timiditatem cuiquam quale unam
                                factorum morati, status apud laboramus partitio saluto malit
                                exeduntur alia divelli, unde pauca repugnantibus iniucundus autem
                                malit debent. Consilio praeclaram conflixisse vero.
                            </div>
                            <div class="tab-pane" id="exampleBottomJavascript" role="tabpanel">
                                Legimus eorum caeco iustitia perpetua, utuntur inopem dolemus capti, aliquid civibus
                                domo perpessio occultarum panaetium scientiam. Successionem conciliant
                                habemus omnis virtus arbitrium obcaecati modi, torquatus movere
                                mea oculis horrida, infinitis appellant, metum perturbatur. Plena
                                retinent veriusque tranquillitatem quod dubio opinemur.
                            </div>
                        </div>
                    </div>
                    <ul class="nav nav-tabs nav-tabs-bottom nav-tabs-line dropup" data-plugin="nav-tabs"
                        role="tablist">
                        <li class="active" role="presentation"><a data-toggle="tab" href="#exampleBottomHome" aria-controls="exampleBottomHome"
                                                                  role="tab"><i class="icon md-home" aria-hidden="true"></i>Home</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleBottomComponents" aria-controls="exampleBottomComponents"
                                                   role="tab"><i class="icon md-account" aria-hidden="true"></i>Components</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleBottomCss" aria-controls="exampleBottomCss"
                                                   role="tab"><i class="icon md-label" aria-hidden="true"></i>CSS</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleBottomJavascript" aria-controls="exampleBottomJavascript"
                                                   role="tab"><i class="icon md-cloud" aria-hidden="true"></i>JavaScript</a></li>
                        <li class="dropdown" role="presentation">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                                <span class="caret"></span>Dropdown </a>
                            <ul class="dropdown-menu" role="menu">
                                <li class="active" role="presentation"><a data-toggle="tab" href="#exampleBottomHome" aria-controls="exampleTopHome"
                                                                          role="tab"><i class="icon md-home" aria-hidden="true"></i>Home</a></li>
                                <li role="presentation"><a data-toggle="tab" href="#exampleBottomComponents" aria-controls="exampleTopComponents"
                                                           role="tab"><i class="icon md-account" aria-hidden="true"></i>Components</a></li>
                                <li role="presentation"><a data-toggle="tab" href="#exampleBottomCss" aria-controls="exampleTopCss"
                                                           role="tab"><i class="icon md-label" aria-hidden="true"></i>CSS</a></li>
                                <li role="presentation"><a data-toggle="tab" href="#exampleBottomJavascript" aria-controls="exampleTopJavascript"
                                                           role="tab"><i class="icon md-cloud" aria-hidden="true"></i>JavaScript</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- End Example Tabs In The Bottom -->
            </div>

            <div class="clearfix visible-xlg-block"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Transparent Panel -->
                <div class="panel panel-transparent">
                    <div class="panel-heading">
                        <h3 class="panel-title">Transparent Panel</h3>
                        <div class="panel-actions">
                            <a class="panel-action icon md-minus" aria-controls="exampleTransparentBody" aria-expanded="true"
                               data-toggle="panel-collapse" href="#exampleTransparentBody" aria-hidden="true"></a>
                            <a class="panel-action icon md-close" data-toggle="panel-close" aria-hidden="true"></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum Ea aliquip minim aliqua sunt qui cupidatat minim qui
                            nisi nisi dolore Ut enim aliquip eiusmod proident tempor non voluptate
                            voluptate aute ea mollit veniam nisi sint proident sed velit est
                            non voluptate magna amet dolor labore elit magna cupidatat aliquip.</p>
                    </div>
                </div>
                <!-- End Example Transparent Panel -->
            </div>

            <div class="clearfix visible-md-block visible-lg-block hidden-xlg"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel Clickable -->
                <div class="panel">
                    <div class="panel-heading">
                        <div class="panel-actions">
                            <button class="btn btn-flat btn-default btn-block" id="exampleButtonRandom" type="button">random</button>
                        </div>
                        <h3 class="panel-title">Panel With Clickable</h3>
                    </div>
                    <div class="panel-body">
                        <div class="progress progress-sm margin-top-10" data-goal="25" data-plugin="progress">
                            <div class="progress-bar" aria-valuemin="15" aria-valuemax="115" aria-valuenow="25"
                                 role="progressbar"></div>
                        </div>
                        <div class="progress progress-sm" data-goal="-40" data-plugin="progress">
                            <div class="progress-bar" aria-valuemin="-100" aria-valuemax="0" aria-valuenow="-40"
                                 role="progressbar"></div>
                        </div>
                        <div class="progress progress-sm" data-goal="80" data-plugin="progress">
                            <div class="progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80"
                                 role="progressbar"></div>
                        </div>
                        <div class="progress progress-sm" data-goal="30" data-plugin="progress">
                            <div class="progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
                                 role="progressbar"></div>
                        </div>
                    </div>
                </div>
                <!-- End Example Panel Clickable -->
            </div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel Progressbar -->
                <div class="panel">
                    <div class="panel-heading">
                        <div class="panel-actions">
                            <div class="progress progress-xs width-xs-150 width-lg-100">
                                <div class="progress-bar" style="width: 80%;">
                                    <span class="sr-only">80% Complete</span>
                                </div>
                            </div>
                        </div>
                        <h3 class="panel-title">Panel With Progressbar</h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
                            nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
                            Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
                            Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris
                            massa. </p>
                    </div>
                </div>
                <!-- End Example Panel Progressbar -->
            </div>


            <div class="clearfix"></div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel With Labels And Badges -->
                <div class="panel">
                    <div class="panel-heading">
                        <div class="panel-actions">
                            <span class="label label-primary">Label</span>
                            <span class="badge badge-danger">Badge</span>
                        </div>
                        <h3 class="panel-title">Panel With Labels And Badges</h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum Esse labore mollit labore pariatur quis ut ex cillum
                            cillum quis dolor aliqua dolor amet qui velit dolor fugiat.</p>
                    </div>
                </div>
                <!-- End Example Panel With Labels And Badges -->
            </div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel With Toggle -->
                <div class="panel">
                    <div class="panel-heading">
                        <div class="panel-actions">
                            <input type="checkbox" data-plugin="switchery" data-size="small" checked />
                        </div>
                        <h3 class="panel-title">Panel With Toggle</h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum Qui veniam adipisicing aute occaecat proident elit dolor
                            aliqua nostrud ex in ad eu dolore mollit exercitation dolor.</p>
                    </div>
                </div>
                <!-- End Example Panel With Toggle -->
            </div>

            <div class="col-xlg-4 col-md-6">
                <!-- Example Panel With Input Group -->
                <div class="panel">
                    <div class="panel-heading">
                        <div class="panel-actions">
                            <div class="input-search input-group-sm">
                                <button type="submit" class="input-search-btn">
                                    <i class="icon md-search" aria-hidden="true"></i>
                                </button>
                                <input type="text" class="form-control" name="" placeholder="Search...">
                            </div>
                        </div>
                        <h3 class="panel-title">Panel With Input Group</h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum Duis mollit enim dolor velit aliquip magna incididunt
                            adipisicing in elit anim ut enim est cupidatat eu cillum exercitation.</p>
                    </div>
                </div>
                <!-- End Example Panel With Input Group -->
            </div>

            <div class="clearfix"></div>

            <div class="col-md-6">
                <!-- Example Panel Pagination -->
                <div class="panel">
                    <div class="panel-heading">
                        <div class="panel-actions">
                            <nav>
                                <ul class="pagination pagination-no-border pagination-sm">
                                    <li>
                                        <a href="javascript:void(0)">
                                            <span aria-hidden="true">&laquo;</span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                    </li>
                                    <li class="active">
                                        <a href="javascript:void(0)">1</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">2</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">3</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">4</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">
                                            <span aria-hidden="true">&raquo;</span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <h3 class="panel-title">Panel With Pagination</h3>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
                            nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
                            Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
                            Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris
                            massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti
                            sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                    </div>
                </div>
                <!-- End Example Panel Pagination -->
            </div>

            <div class="col-md-6">
                <!-- Example Panel With Tool -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel With Tool</h3>
                        <div class="panel-actions">
                            <div class="dropdown">
                                <a class="dropdown-toggle panel-action" data-toggle="dropdown" href="#" aria-expanded="false"><i class="icon md-settings" aria-hidden="true"></i></a>
                                <ul class="dropdown-menu bullet" role="menu">
                                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon md-flag" aria-hidden="true"></i> Action</a></li>
                                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon md-print" aria-hidden="true"></i> Another action</a></li>
                                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon md-favorite" aria-hidden="true"></i> Something else here</a></li>
                                    <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon md-share" aria-hidden="true"></i> Separated link</a></li>
                                </ul>
                            </div>
                            <a class="panel-action icon md-refresh-alt" data-toggle="panel-refresh" data-load-type="round-circle"
                               data-load-callback="customRefreshCallback" aria-hidden="true"></a>
                            <a class="panel-action icon md-minus" data-toggle="panel-collapse" aria-expanded="true"
                               aria-hidden="true"></a>
                            <a class="panel-action icon md-fullscreen" data-toggle="panel-fullscreen" aria-hidden="true"></a>
                            <a class="panel-action icon md-close" data-toggle="panel-close" aria-hidden="true"></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent
                        libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
                        nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
                        nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia
                        arcu eget nulla. Class aptent taciti sociosqu ad litora torquent
                        per conubia nostra, per inceptos himenaeos.
                    </div>
                </div>
                <!-- End Example Panel With Tool -->
            </div>

            <div class="col-md-6">
                <!-- Example Panel With Scrollable -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel With Scrollable</h3>
                    </div>
                    <div class="panel-body height-250" data-plugin="scrollable" data-skin="scrollable-shadow">
                        <div data-role="container">
                            <div data-role="content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
                                    nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
                                    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
                                    ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
                                    Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent
                                    taciti sociosqu ad litora torquent per conubia nostra, per
                                    inceptos himenaeos.</p>

                                <p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh.
                                    Aenean quam. In scelerisque sem at dolor. Maecenas mattis.
                                    Sed convallis tristique sem. Proin ut ligula vel nunc egestas
                                    porttitor. Morbi lectus risus, iaculis vel, suscipit quis,
                                    luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
                                    Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt
                                    sed, euismod in, nibh.</p>

                                <p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu
                                    ad litora torquent per conubia nostra, per inceptos himenaeos.
                                    Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor
                                    neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla
                                    facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi
                                    a tellus consequat imperdiet. Vestibulum sapien. Proin quam.
                                    Etiam ultrices.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Example Panel With Scrollable -->
            </div>

            <div class="col-md-6">
                <!-- Example Panel Horizontal Scrollable -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel With Horizontal Scrollable</h3>
                    </div>
                    <div class="panel-body container-fluid height-250" data-show-on-hover="false" data-direction="horizontal"
                         data-skin="scrollable-shadow" data-plugin="scrollable">
                        <div data-role="container">
                            <div data-role="content" style="width:1400px">
                                <div class="row">
                                    <div class="col-sm-3">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent
                                        libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis
                                        sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
                                        mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
                                        Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu
                                        ad litora torquent per conubia nostra, per inceptos himenaeos.
                                        Curabitur sodales ligula in libero.
                                    </div>
                                    <div class="col-sm-3">
                                        Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In
                                        scelerisque sem at dolor. Maecenas mattis. Sed convallis
                                        tristique sem. Proin ut ligula vel nunc egestas porttitor.
                                        Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
                                        massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris
                                        ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed,
                                        euismod in, nibh.
                                    </div>
                                    <div class="col-sm-3">
                                        Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent
                                        per conubia nostra, per inceptos himenaeos. Nam nec ante.
                                        Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
                                        diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut
                                        fringilla. Suspendisse potenti. Nunc feugiat mi a tellus
                                        consequat imperdiet. Vestibulum sapien. Proin quam. Etiam
                                        ultrices.
                                    </div>
                                    <div class="col-sm-3">
                                        Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus
                                        luctus magna. Quisque cursus, metus vitae pharetra auctor,
                                        sem massa mattis sem, at interdum magna augue eget diam.
                                        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
                                        posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
                                        blandit dolor. Sed non quam. In vel mi sit amet augue congue
                                        elementum.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Example Panel Horizontal Scrollable -->
            </div>
        </div>

        <!-- Example Panel Toolbar -->
        <div class="panel" id="examplePanelToolbar">
            <div class="panel-heading">
                <div class="panel-actions">
                    <div class="dropdown show-on-hover">
                        <a class="dropdown-toggle panel-action" data-toggle="dropdown" href="#" aria-expanded="false"><i class="icon md-settings" aria-hidden="true"></i></a>
                        <ul class="dropdown-menu bullet" role="menu">
                            <li role="presentation"><a href="javascript:void(0)" role="menuitem">Action</a></li>
                            <li role="presentation"><a href="javascript:void(0)" role="menuitem">Another action</a></li>
                            <li role="presentation"><a href="javascript:void(0)" role="menuitem">Something else here</a></li>
                            <li role="presentation"><a href="javascript:void(0)" role="menuitem">Separated link</a></li>
                        </ul>
                    </div>
                    <a class="panel-action icon md-refresh-alt show-on-hover" data-toggle="panel-refresh"
                       data-load-type="round-circle" data-load-callback="customRefreshCallback"
                       aria-hidden="true"></a>
                    <a class="panel-action icon md-minus" data-toggle="panel-collapse" aria-expanded="true"
                       aria-hidden="true"></a>
                    <a class="panel-action icon md-fullscreen" data-toggle="panel-fullscreen" aria-hidden="true"></a>
                    <a class="panel-action icon md-close" data-toggle="panel-close" aria-hidden="true"></a>
                </div>
                <h3 class="panel-title">Panel With Toolbar</h3>
            </div>
            <div class="panel-collapse">
                <div class="panel-toolbar" role="toolbar">
                    <div class="btn-group btn-group-flat" role="group">
                        <a class="btn" href="javascript:void(0)" role="button"><i class="icon md-format-bold" aria-hidden="true"></i></a>
                        <a class="btn" href="javascript:void(0)" role="button"><i class="icon md-format-italic" aria-hidden="true"></i></a>
                        <a class="btn" href="javascript:void(0)" role="button"><i class="icon md-format-underlined" aria-hidden="true"></i></a>
                        <a class="btn" href="javascript:void(0)" role="button"><i class="icon md-format-align-left" aria-hidden="true"></i></a>
                        <a class="btn" href="javascript:void(0)" role="button"><i class="icon md-format-align-center" aria-hidden="true"></i></a>
                        <a class="btn" href="javascript:void(0)" role="button"><i class="icon md-format-align-right" aria-hidden="true"></i></a>
                        <a class="btn" href="javascript:void(0)" role="button"><i class="icon md-image" aria-hidden="true"></i></a>
                        <a class="btn" href="javascript:void(0)" role="button"><i class="icon md-grid" aria-hidden="true"></i></a>
                        <a class="btn" href="javascript:void(0)" role="button"><i class="icon md-link" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="panel-body">
            <textarea class="form-control panel-control" placeholder="This is a form textarea..."
                      rows="5"></textarea>
                    <button type="button" class="btn btn-primary margin-top-15">Submit</button>
                </div>
            </div>
        </div>
        <!-- End Example Panel Toolbar -->

        <!-- Example Contextual -->
        <div class="row">
            <div class="col-sm-4">
                <div class="panel panel-bordered panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Primary Panel</h3>
                    </div>
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
                        odio. Praesent libero. Sed cursus ante dapibus diam.</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-bordered panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">Success Panel</h3>
                    </div>
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
                        odio. Praesent libero. Sed cursus ante dapibus diam.</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-bordered panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">Info Panel</h3>
                    </div>
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
                        odio. Praesent libero. Sed cursus ante dapibus diam.</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-bordered panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">Warning Panel</h3>
                    </div>
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
                        odio. Praesent libero. Sed cursus ante dapibus diam.</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-bordered panel-danger">
                    <div class="panel-heading">
                        <h3 class="panel-title">Danger Panel</h3>
                    </div>
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
                        odio. Praesent libero. Sed cursus ante dapibus diam.</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-bordered panel-dark">
                    <div class="panel-heading">
                        <h3 class="panel-title">Dark Panel</h3>
                    </div>
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
                        odio. Praesent libero. Sed cursus ante dapibus diam.</div>
                </div>
            </div>
        </div>
        <!-- End Example Contextual -->
    </div>
    <!-- End Page Content -->
</div>
<!-- End Page -->


<!-- Footer -->
<footer class="site-footer">
    <div class="site-footer-legal">© 2016 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
        Crafted with <i class="red-600 icon md-favorite"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
</footer>
<!-- Core  -->
<script src="../../global/vendor/jquery/jquery.min.js"></script>
<script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
<script src="../../global/vendor/animsition/animsition.min.js"></script>
<script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
<script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
<script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
<script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>
<script src="../../global/vendor/waves/waves.min.js"></script>

<!-- Plugins -->
<script src="../../global/vendor/switchery/switchery.min.js"></script>
<script src="../../global/vendor/intro-js/intro.min.js"></script>
<script src="../../global/vendor/screenfull/screenfull.min.js"></script>
<script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

<!-- Plugins For This Page -->
<script src="../../global/vendor/asprogress/jquery-asProgress.min.js"></script>
<script src="../../global/vendor/draggabilly/draggabilly.pkgd.min.js"></script>

<!-- Scripts -->
<script src="../../global/js/core.min.js"></script>
<script src="../assets/js/site.min.js"></script>

<script src="../assets/js/sections/menu.min.js"></script>
<script src="../assets/js/sections/menubar.min.js"></script>
<script src="../assets/js/sections/gridmenu.min.js"></script>
<script src="../assets/js/sections/sidebar.min.js"></script>

<script src="../../global/js/configs/config-colors.min.js"></script>
<script src="../assets/js/configs/config-tour.min.js"></script>

<script src="../../global/js/components/asscrollable.min.js"></script>
<script src="../../global/js/components/animsition.min.js"></script>
<script src="../../global/js/components/slidepanel.min.js"></script>
<script src="../../global/js/components/switchery.min.js"></script>
<script src="../../global/js/components/tabs.min.js"></script>

<script src="../../global/js/plugins/responsive-tabs.min.js"></script>
<script src="../../global/js/components/asprogress.min.js"></script>
<script src="../../global/js/components/panel.min.js"></script>
<script src="../../global/js/components/asscrollable.min.js"></script>


<script src="../assets/examples/js/uikit/panel-structure.min.js"></script>



</body>

</html>